<template lang="">
    <div>
        <myheader :img_src='url'/>
        <h2>用户中心</h2>
        {{user.username}}<br>
        手机号{{user.mobile | mobilefilter}}<br>
        头像<van-image
        round
        width="15rem"
        height="15rem"
        :src="url"
      /><br>
        上传头像：<van-uploader :after-read="upload" />
    </div>
</template>
<script>
import myheader from '@/components/myheader'
export default {
  data(){
    return{
      user:{},
      userid:localStorage.getItem('userid'),
      url:''
    }
  },
  //定义过滤器
  filters:{
    //手机号隐藏中间6位
    mobilefilter(value){
      if (value){
      return value.slice(0,3)+"******"+value.slice(-3,-1)}
    },
  },
  methods: {
    //获取用户
    getUserinfo(){
      this.$axios.get('users/getuserinfo?userid='+this.userid).then(res=>{
        this.user = res.data.dict
        this.url = this.upload_dir+this.userid+"/"+this.user.avater
      })
    },
    //单文件上传
    upload(file){
      // 此时可以自行将文件上传至服务器
      let data = new FormData()
      data.append('file',file.file)
      data.append('userid',this.userid)
      this.$axios.post('users/upload',data).then(res=>{
        //更新展示图片的地址
        this.url = this.upload_dir+this.userid+"/"+res.data.filename
      })
    }
  },
  mounted() {
    this.getUserinfo()
  },
  components:{
    'myheader':myheader
  }
}
</script>
<style lang="">

</style>
